<template>
  <div>
    <el-dialog
      :visible.sync="showCap"
      width="400px"
      top="20vh"
      :append-to-body="true"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div slot="title" class="title_close">
        <!-- 找回登录密码/更换手机号 -->
        <div class="title">{{ isloginPass == 2 ? $t('inccom.captcha_dialog.56hu6zpbbfg0') : $t('inccom.captcha_dialog.56hu6zpbcpc0')}}</div>
        <img
          src="@/assets/img/icon_gb1.png"
          class="close"
          @click="hideCaptcha"
        />
      </div>
      <!-- 输入手机号和验证码 -->
      <div class="phone_captcha">
        <!-- 手机号 -->
        <TelInput @mobileChange="mobileChange" @codeChange="codeChange" color="black" ObjectName="VerificationLogin">
          <h2>{{ $t("m.phone_number") }}</h2>
        </TelInput>
        <h2>{{ $t("m.SMSCode") }}</h2>
        <div class="f-cb code">
          <input
            type="text"
            v-model="captcha"
            :placeholder="$t('m.inputCode')"
            class="input_code"
          />
          <input
            type="button"
            v-model="name"
            @click="sends"
            :disabled="disabled"
            class="send_code"
          />
        </div>
        <button @click="confirm" class="submit">
          {{ $t("m.determine") }}
        </button>
      </div>
      <SetPass :showPass="isShowPasswordDia" @closeSet="closeSet"></SetPass>
    </el-dialog>
  </div>
</template>

<script>
import SetPass from "./SetPassword";
import TelInput from "@/components/common/TelInput.vue";
import {post_change_mobile, post_logout} from '@/assets/js/API/user.js'
import { get_sms_check } from '@/assets/js/API/system.js'
import {get_sms_send} from '@/assets/js/API/system.js'
export default {
  components: {
    SetPass,
    TelInput
  },
  props: {
    showCap: Boolean,
    isloginPass: Number,
  },
  data() {
    return {
      lang: "",
      cities: [],
      name: this.$i18n.t("m.ObtainCode"),
      disabled: false,
      auth_time: 60,
      auth_timetimer: null,
      captcha: "",
      VerificationLogin: {
        mobile: "",
        countryCode: "+86",
        event: "changemobile",
      },
      isShowPasswordDia: false, // 展示修改密码登录框
    };
  },
  created() {},
  mounted() {
    this.lang = localStorage.getItem("lang");
  },
  beforeDestroy() {
    clearInterval(this.auth_timetimer);　　// 清除定时器
    this.auth_time = 60;
  },
  methods: {
    hideCaptcha() {
      this.captcha = "";
      this.VerificationLogin = {
        mobile: "",
        countryCode: "+86",
        event: "changemobile",
      },
      this.$emit("closeCapDia");
    },
    // flag: false: 修改手机号事件验证码， true：忘记密码发送验证码 
    confirm() {
      if (this.VerificationLogin.mobile == "") return this.$message.error(this.$i18n.t("m.ObtainPhone"));
      if(this.captcha == "") return this.$message.error(this.$i18n.t("m.inputCode"));
      if(this.isloginPass == 2) {
        // 2: 更改手机号事件
        this.setMobile();
      }else {
        // 1: 更改登录密码
        this.forgetPass();
      }
    },
    // 关闭修改登录密码对话框
    closeSet() {
      this.isShowPasswordDia = false;
    },
    // 点击发送验证码延迟
    codeClick() {
      this.disabled = true;
      this.auth_timetimer = setInterval(() => {
        this.auth_time--;
        this.name = this.auth_time + this.$i18n.t("m.result");
        if (this.auth_time <= 0) {
          this.disabled = false;
          this.name = this.$i18n.t("m.ObtainCode");
          clearInterval(this.auth_timetimer);
          this.auth_time = 60;
        }
      }, 1000);
    },
    // 发送验证码请求
    async sends() {
      // flag: false: 修改手机号事件验证码， true：忘记密码发送验证码
      const res = await get_sms_send({
          mobile: this.VerificationLogin.mobile,
          countryCode: this.VerificationLogin.countryCode,
          event: this.VerificationLogin.event,
        });
      if (res.code != 1) return this.$message.error(res.msg);
      this.codeClick();
      return this.$message.success(res.msg);
    },
    // 修改手机号
    async setMobile() {
      const res = await post_change_mobile({
        mobile: this.VerificationLogin.mobile,
        countryCode: this.VerificationLogin.countryCode,
        captcha: this.captcha,
      });
      if (res.code != 1) return this.$message.error(res.msg);
      this.hideCaptcha();
      this.$store.dispatch("SetAccount", this.VerificationLogin.mobile);
      this.logouts();
      return this.$message.success(res.msg);
    },
    // 发送验证码检验忘记密码事件
    async forgetPass() {
      const res = await get_sms_check({
        mobile: this.VerificationLogin.mobile,
        countryCode: this.VerificationLogin.countryCode,
        event: this.VerificationLogin.event,
        captcha: this.captcha,
      });
      if(res.code != 1) return this.$message.error(res.msg);
      this.isShowPasswordDia = true;
      this.hideCaptcha();
      return this.$message.success(res.msg)
    },
    // 退出登录
    async logouts() {
      const res = await post_logout();
      if (res.code != 1) return this.$message.error(res.msg);
      this.$message.success(res.msg);
      sessionStorage.clear();
      this.$router.push(`/login?lang=${this.Lang}`);
      setTimeout(()=> {
        window.location.reload();
      },100)
    },
    mobileChange(val,obj) {
      this[obj].mobile = val;
    },
    codeChange(val, obj) {
      this[obj].countryCode = val;
    }
  },
  computed: {
    account() {
      return this.$store.state.index.account;
    },
    countryCode() {
      return this.$store.state.index.countryCode;
    },
  },
  watch: {
    isloginPass(val){
      if(val == 2) {
        // 2: 更改手机号事件
         this.VerificationLogin = {
          mobile: "",
          countryCode: "+86",
          VerificationLogin: "changemobile"
        };
      }else {
        // 1: 找回登录密码
        this.VerificationLogin.mobile = this.account;
        this.VerificationLogin.countryCode = this.countryCode;
        this.VerificationLogin.event = "resetpwd";
      }
    }
  }
};
</script>
<style lang="less">
.phone_captcha {
  h2 {
    color: @fbSix;
    font-size: 12px;
    padding-top: 8px;
  }
  .leftfix {
    padding-left: 0;
    padding-right: 0;
  }
  .code {
    border: 1px solid @hoverColor;
    border-radius: 3px;
    width: 100%;
    height: 40px;
    color: @fbSix;
    background-color: @LightBorderLine;
    .input_code {
      height: 100%;
      color: @fff;
      background-color: transparent;
      padding-left: 14px;
      border: none;
      float: left;
    }
    .send_code {
      background-color: @hoverColor;
      height: 100%;
      border: none;
      color: @fff;
      float: right;
      width: 100px;
    }
  }
  .submit {
    width: 100%;
    background-color: @hoverColor;
    height: 40px;
    border-radius: 3px;
    border: 1px solid transparent;
    color: @fff;
    font-size: 12px;
    margin-top: 30px;
  }
}
</style>